<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model双向数据绑定</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model双向数据绑定</h1>
    <hr>
    <h3>文本框数据双向绑定</h3>
        <div id="app">
        <p>双向数据绑定：{{message}}</p>
        v-model &nbsp;<input type="text" v-model="message">
        正常数据双向绑定
        <br>
        v-model.lazy &nbsp;<input type="text" v-model.lazy="message">
        延迟数据双向绑定
        
        <br>
        v-model.number &nbsp;<input type="text" v-model.number="message">
        数字数据双向绑定
        <br>
        v-model.trim &nbsp;<input type="text" v-model.trim="message">
        去除前后空格 数据双向绑定
        <br>
        <hr>
        <h3>文本域数据双向绑定</h3>
        <textarea  cols="30" rows="10" v-model="message"></textarea>
        <br>
        <hr>
        <h3>多选框双向数据绑定-绑定一个值</h3>
        <input type="checkbox" id="trueOrFalse" v-model="isTrue">
        <label for="trueOrFalse">{{isTrue}}</label>
        <hr>
        <h3>多选框绑定一个数组</h3>
        <p> 
            <input type="checkbox" id="xiaohong" value="小红" v-model='nameDatas'/>
            <label for="xiaohong">小红</label>
            <input type="checkbox" id="xiaoming" value="小明" v-model='nameDatas'/>
            <label for="xiaoming">小红</label>
            <input type="checkbox" id="xiaolan" value="小蓝" v-model='nameDatas'/>
            <label for="xiaolan">小红</label>
            <p  >
                选择的人员有{{nameDatas}}
            </p>
            <hr>
            <h3>单选框的双向数据绑定</h3>
            <p>
                <input type="radio" id="man" value="男" v-model='sexName'>
                <label for="man">男</label>
                <input type="radio" id="Wouman" value="女" v-model='sexName'>
                <label for="Wouman">女</label>
            </p>
            <p>
                你选择的性别是：{{sexName}}
            </p>

        </p>

    </div>

        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    message:"Hello world",
                    isTrue:true,
                    nameDatas:[],
                    sexName:'男'
                }
            })
        </script>
</body>
</html>